<template>
  <div class="content">
    <NavBar>
      <template slot="content">
        <div>修改手机号</div>
      </template>
    </NavBar>
    <div class="title">
      <div class="text">输入需要换绑的手机号</div>
      <div class="dec">用于登录、安全验证、接受交易提醒</div>
    </div>
    <div class="input">
      <van-form>
        <van-field
          name="pattern"
          v-model="phone"
          placeholder="请输入手机号"
          maxlength="11"
          :rules="[
            {
              pattern:
                /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
              message: '手机号码格式错误'
            }
          ]"
        />
      </van-form>
    </div>
    <div>
      <van-button
        type="primary"
        :disabled="button"
        block
        @click="hundleNext"
        class="margin"
      >
        下一步
      </van-button>
    </div>
  </div>
</template>
<script>
import NavBar from '@/components/h5header'
import API from '@/services/h5/my'
export default {
  components: { NavBar },
  data() {
    return {
      phone: '',
      button: true
    }
  },
  watch: {
    phone(val) {
      if (
        val != '' &&
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
          val
        )
      ) {
        this.button = false
      }
    }
  },
  methods: {
    onClickLeft() {
      window.history.go(-1)
    },
    //获取变更后手机号的验证码
    hundleNext() {
      let params = {
        mobile: this.phone
      }
      API.getvalidation(params).then(res => {
        if (res.data && res.data.code === 1000) {
          this.$router.push({
            path: '/validation',
            query: { mobile: this.phone }
          })
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
.content {
  background: #f0f0f0;
  height: calc(100vh);
  .title {
    width: 375px;
    margin-top: 76px;
    margin-bottom: 55px;
    .text {
      font-size: 20px;
      color: #333;
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-weight: bold;
    }
    .dec {
      font-size: 15px;
      color: #999;
      height: 15px;
      line-height: 15px;
      margin-top: 10px;
      text-align: center;
    }
  }
  .margin {
    width: 345px;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 4.5px;
  }
}
</style>